<template>
  <div id="app" :class="{ banbody: banbody }">
    <div class="main">
      <!-- 登录页面 -->
      <login-page
        :show="loginshow"
        @hideloginson="hidelogin"
        @checkloginson="checklogin"
      ></login-page>
      <!-- 侧边栏组件 -->
      <side-bar
        :show="sideBarShow"
        @checkloginson="checklogin"
        @hidesidebarson="hidesidebar"
        @showloginson="showlogin"
        :face="faceurl"
        :nickName="nickname"
        :logint="loginType"
        @logoutson="logout"
      ></side-bar>
      <router-view
        :face="faceurl"
        :logint="loginType"
        :imgson="imgs"
        :iconson="icons"
        :recommendson="recommends"
        :songson="songs"
        :personalid="userid"
        @hidelogson="hidelogin"
        @tosearchson="tosearch"
        @showsidebarson="showsidebar"
        @play-musicson="playMusic"
        @showloginson="showlogin"
        @enter-play-listson="enterPlayList"
        @change-enter-phoneson="changeEnterPhone"
        @change-enter-codeson="changeEnterCode"
        @hideloginson="hidelogin"
        @checklogingrandson="checklogin"
        @returnmainson="returnmain"
        @showvideoson="showvideo"
        @click-search-list-funson="clickSearchListFun"
      ></router-view>
    </div>
    <!-- 底部组件 -->
    <footer-l
      :mylikelist="myLike"
      :prop="music"
      :songsList="savesongLists"
      :currentsongindex="currentsong"
      :mainPlay="mainPlayFlag"
      :plshow="playListShow"
      :seshow="searchShow"
      @move="movebodyFun"
      @ban="banbodyFun"
      @playnextson="playNext"
      @hide-main-playson="hideMainPlay"
      @show-main-playson="showMainPlay"
      @change-play-musicson="changePlayMusic"
    ></footer-l>
    <play-list
      :prop="userPlaylistdetail"
      :show="playListShow"
      @clickPlayListFunson="clickPlayListFun"
      @leavePlayListson="leavePlayList"
    ></play-list>
    <play-video
      :show="videostate"
      @hidevideoson="hidevideo"
      :prop="video"
    ></play-video>
  </div>
</template>

<script>
// ：bug🤺退！🤺退！🤺退！🤺退！

// ：bug🤺退！🤺退！🤺退！🤺退！

// ：bug🤺退！🤺退！🤺退！🤺退！

// ：bug🤺退！🤺退！🤺退！🤺退！

import playVideo from "./components/playvideo.vue";
import playList from "./components/playList.vue";
import loginPage from "./components/login.vue";
import sideBar from "./components/sideBar.vue";
import footerL from "./components/footerList.vue";
import {
  userAccount,
  loginstatus,
  loginenter,
  userout,
} from "./assets/api/login.js";
import {
  getBanner,
  getIcon,
  getRecommend,
  getSong,
  getSongDetail,
} from "./assets/api/found.js";
import { getPlaylistDetail, getMyLike } from "./assets/api/personal";

export default {
  data() {
    return {
      video: "2C172A631F2C45C8A19D4CF77FD8E1AD", //当前播放视频
      videostate: false, //播放页面是否展现
      myLike: [], //我喜欢的音乐列表
      searchShow: false, //搜索列表显示状态
      playListShow: false, //歌单列表显示状态
      userid: "", //用户id
      loginType: false, //登录状态
      nickname: "", //用户名
      personalbgurl: "", //用户背景图
      faceurl: "", //用户头像
      loginshow: false,
      sideBarShow: false, //侧边栏显示
      banbody: false, //禁止页面滑动
      currentsong: -1, //当前播放的歌曲下标
      mainPlayFlag: false, //播放页面是否显示
      imgs: null,
      icons: null,
      recommends: null,
      songslists: [], // 没处理前
      savesongLists: [], //保存拿来修改的当前播放列表
      songs: [], //推荐歌曲列表（处理后的）
      userPlaylistdetail: [], //点击获取到的歌单
      music: {
        name: "",
        picUrl: "",
        id: 0,
        singername: "",
      },
    };
  },
  methods: {
    hidevideo() {
      this.videostate = false;
      this.movebodyFun();
    },
    showvideo(vid) {
      this.videostate = true;
      this.banbodyFun();
      this.video = vid;
    },
    //搜索页面回到主页面
    returnmain() {
      this.$router.push({ name: "main" });
      this.searchShow = false;
    },
    //跳转到搜索页面
    tosearch() {
      this.$router.push({ name: "search" });
      this.searchShow = true;
    },
    // 点击搜索列表歌曲
    clickSearchListFun(item) {
      this.mainPlayFlag = true;
      getSongDetail({ ids: item.id }).then((info) => {
        this.music = {
          id: item.id,
          name: item.name,
          picUrl: info.songs[0].al.picUrl,
          singername: item.artists[0].name,
        };
      });
    },
    //点击歌单列表歌曲
    clickPlayListFun(list, index) {
      this.savesongLists = list;
      this.mainPlayFlag = true;
      this.music = list[index];
      this.currentsong = index;
    },
    //退出歌单列表
    leavePlayList() {
      this.playListShow = false;
      this.movebodyFun();
    },
    //进入歌单列表
    enterPlayList(id) {
      getPlaylistDetail({ id: id }).then((data) => {
        this.userPlaylistdetail = data.playlist;
      });
      this.playListShow = true;
      this.banbodyFun();
    },
    //登录状态
    checklogin() {
      loginstatus().then((data) => {
        if (data.data.account != null) {
          this.userid = data.data.account.id;
          this.loginType = true;
          this.faceurl = data.data.profile.avatarUrl;
          this.personalbgurl = data.data.profile.backgroundUrl;
          this.nickname = data.data.profile.nickname;
        } else {
          userAccount().then((data) => {
            console.log(data);
            if (data.account != null) {
              this.userid = data.account.id;
              this.loginType = true;
              this.faceurl = data.profile.avatarUrl;
              this.personalbgurl = data.profile.backgroundUrl;
              this.nickname = data.profile.nickname;
            }
          });
        }
      });
    },
    //转到输入验证码
    changeEnterCode(number) {
      this.$router.push({ name: "enterCode", params: { phonenumber: number } });
    },
    //转到输入手机号
    changeEnterPhone() {
      this.$router.push({ name: "enterPhone" });
      this.enter = true;
    },
    //退出登录
    logout() {
      userout();
      this.loginType = false;
      this.faceurl = "";
      this.personalbgurl = "";
      this.nickname = "";
    },
    //隐藏登录页面
    hidelogin() {
      this.loginshow = false;
      this.movebodyFun();
      setTimeout(() => {
        this.$router.push({ name: "main" });
      }, 200);
    },
    //显示登录页面
    showlogin() {
      setTimeout(() => {
        this.$router.push({ name: "login" });
      }, 200);
      this.loginshow = true;
      this.banbodyFun();
      this.hidesidebar();
    },
    //隐藏侧边栏
    hidesidebar() {
      this.sideBarShow = false;
      this.movebodyFun();
    },
    //显示侧边栏()
    showsidebar() {
      this.sideBarShow = true;
      this.banbodyFun();
    },
    //页面滚动
    movebodyFun() {
      this.banbody = false;
    },
    //禁止页面滚动
    banbodyFun() {
      this.banbody = true;
    },
    //点击播放列表的歌进行切歌
    changePlayMusic(index) {
      this.music = this.savesongLists[index];
      this.music.singername = this.savesongLists[index].singername;
    },
    //保存播放列表
    deliver() {
      this.savesongLists = this.songslists;
    },
    playNext(type) {
      if (type == "next") {
        this.currentsong += 1;
        this.currentsong %= this.savesongLists.length;
      } else {
        this.currentsong -= 1;
        this.currentsong =
          this.currentsong <= -1
            ? this.savesongLists.length - 1
            : this.currentsong;
      }
      this.music = {
        id: this.savesongLists[this.currentsong].id,
        name: this.savesongLists[this.currentsong].name,
        picUrl: this.savesongLists[this.currentsong].picUrl,
        singername: this.savesongLists[this.currentsong].singername,
      };
    },
    playMusic(bigindex, smallindex, main = false) {
      this.currentsong = bigindex * 3 - 1 + smallindex;
      if (main == true) {
        this.music = this.songs[bigindex][smallindex];
        this.mainPlayFlag = true;
        return;
      }
      if (this.music != this.songs[bigindex][smallindex]) {
        this.music = this.songs[bigindex][smallindex];
      } else {
        this.mainPlayFlag = true;
      }
    },
    // 隐藏播放主页面
    hideMainPlay() {
      this.mainPlayFlag = false;
    },
    // 显示播放主页面
    showMainPlay() {
      this.mainPlayFlag = true;
    },
    // 获取默认歌曲
    getDefaultSong() {
      getSongDetail({ ids: "1495058484" }).then((data) => {
        this.music = {
          id: data.songs[0].id,
          name: data.songs[0].name,
          picUrl: data.songs[0].al.picUrl,
          singername: data.songs[0].ar[0].name,
        };
      });
    },
  },
  components: {
    footerL,
    sideBar,
    loginPage,
    playList,
    playVideo,
  },
  created() {
    //获取我喜欢的音乐
    getMyLike().then((data) => {
      this.myLike = data.playlist.trackIds;
      this.myLike.forEach((ele, index) => {
        this.myLike[index] = ele.id;
      });
    });
    //调用轮播图接口
    getBanner().then((data) => {
      this.imgs = data.banners;
    });
    //调用图标接口
    getIcon().then((data) => {
      this.icons = data.data;
    });
    //调用推荐歌单接口
    getRecommend().then((data) => {
      this.recommends = data.result;
    });
    //调用推荐歌曲接口
    getSong().then((data) => {
      data.result.forEach((ele, index) => {
        this.songslists.push({
          id: ele.id,
          name: ele.name,
          picUrl: ele.picUrl,
          singername: ele.song.artists[0].name,
        });
        if ((index + 1) % 3 == 0) {
          this.songs.push([
            {
              id: data.result[index].id,
              name: data.result[index].name,
              picUrl: data.result[index].picUrl,
              singername: data.result[index].song.artists[0].name,
            },
            {
              id: data.result[index - 1].id,
              name: data.result[index - 1].name,
              picUrl: data.result[index - 1].picUrl,
              singername: data.result[index - 1].song.artists[0].name,
            },
            {
              id: data.result[index - 2].id,
              name: data.result[index - 2].name,
              picUrl: data.result[index - 2].picUrl,
              singername: data.result[index - 2].song.artists[0].name,
            },
          ]);
        }
      });
      this.deliver();
    });
    this.getDefaultSong();
    loginenter().then((data) => {
      console.log(data);
      this.checklogin();
    });
  },
};
</script>

<style lang="less">
@import "./assets/css/reset.css";
.banbody {
  overflow: hidden;
}
#app {
  .main {
    padding-bottom: 124px;
    position: relative;
    .mainbox {
      background-color: rgba(255, 255, 255, 0.06);
      border-radius: 16px;
    }
    &::before {
      content: " ";
      z-index: -1;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      position: fixed;
      filter: blur(1.5px);
      background: url(./assets/imgs/bg.jpg) rgba(0, 0, 0, 0.3) center 0
        no-repeat;
      background-blend-mode: multiply;
      background-size: cover;
    }
  }
}
</style>